<!-- 签到模块 -->
<template>
	<view>
		<view class='sign'>      
		    <view class='header bg-color'>
		       <view class='headerCon u-f-jsb u-f-ac'>
		          <view class='left u-f row-between-wrapper'>
		             <view class='pictrue'><image :src='userInfo.memberAvatar'></image></view>
		             <view class='text'>
		                 <view class='line1'>{{userInfo.nickName}}</view>
		                 <view class='integral u-f'><text>积分: {{signMessage.signPoints}}</text></view>
		             </view>
		          </view>
		          <navigator class='right u-f-ac' hover-class='none' url='/pages/home/sign/signDetail'>
		             <view class='iconfont icon-gengduo-2'></view>
		             <view>明细</view>
		          </navigator>
		       </view>
		   </view>
		   <view class='wrapper'>
		      <view class='list u-f-jsb u-f-ac'>
		         <view class='item' v-for="(item,index) in rule" :key="index">
		            <view :class='signMessage.signCount === index + 1 ? "rewardTxt" : ""'>第{{index+1}}天</view>
		            <view class='venus' :class="(index + 1 == false ? 'reward' : '') + ' ' +(signMessage.signCount >= index + 1 ? 'venusSelect' : '')"></view>
		            <view class='num' :class='3 ? "on" : ""'>+{{item}}</view>
		         </view>
		      </view>
		      <button class='but bg-color on' v-if="isSign">已签到</button>
		      <form @submit="toSign" v-else>
		        <button class='but bg-blue' formType="submit">立即签到</button>
		      </form>
		      <view class='lock'></view>
		   </view>
		   <view class='wrapper wrapper2'>
		      <view class='tip'>已累计签到</view>
		     <view class='list2 u-f-ajc'>
		         <view class='item'>{{ parseInt(signMessage.signAmount / 1000)}}</view>
		         <view class='item'>{{ parseInt(signMessage.signAmount % 1000 / 100)}}</view>
		         <view class='item'>{{ parseInt(signMessage.signAmount % 1000 % 100 / 10)}}</view>
		         <view class='item'>{{ parseInt(signMessage.signAmount % 1000 % 100 % 10 / 1)}}</view>
		         <view class='data'>天</view>
		      </view>
		      <view class='tip2'>据说连续签到第7天可获得超额积分，一定要坚持签到哦~~~</view>
		      
		   </view>
		   <view class='signTip u-f-ac u-f-ajc' :class='active==true?"on":""'>
		      <view class='signTipLight loadingpic'></view>
		      <view class='signTipCon'>
		        <view class='state'>签到成功</view>
		        <view class='integral'>获得 {{ rule[signMessage.signCount - 1] }}积分</view>
		        <view class='signTipBnt' @click='close'>好的</view>
		      </view>
		   </view>
		   <!-- 背景发光的 -->
		   <view class='mask' @touchmove.stop.prevent="false" :hidden='active==false'></view>
		</view>
		<!-- #ifdef MP -->
		<!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
		<!-- #endif -->
	</view>
</template>
<script>
	import { getDate , dateDiff, getymd} from '@/common/js/utils/date.js';
	export default {
		data() {
			return {
				userInfo: this.$store.state.userInfo,  //个人信息
				rule: [],  //签到积分规则
				active:false,  //是否展示签到成功模板
				isSign: false,  //是否已签到
				signMessage:{
					signPoints: 0,  //积分
					signCount: 0, //连续签到次数
					signAmount: 0,  //累计签到天数
				},
			};
		},
		onShow() {
			this.getInfo()
		},
		methods:{ 
			//获取信息
			getInfo(){
				this.$http.post('/api/auth/member/sign/load ',this.$store.state.userInfo.memberId, { header: { authType: 'false'}}).then(res => {
					let r = res.data.rule  //拼凑积分规则
					this.rule = [ r.numOne , r.numTwo , r.numThree , r.numFour , r.numFive , r.numSix , r.numSeven ]
					//判断用户连续签到，是否签到
					this.signMessage = res.data.sign
					if (this.signMessage.signTime){ //如果signTime有数据	
						this.isSign = dateDiff(this.signMessage.signTime) == 0 ? true : false  //时间间距小于一天，即当天已签到
					}
				})
			},
			//签到
			toSign(){
				let data = this.signMessage
				// 数据处理
				data.signCount = !data.signTime || data.signCount >= 7 ||  dateDiff(data.signTime) > 1 ? 1 : data.signCount + 1  //没有signTime 或 连续签到大等于七天 或 两次签到时间差大于两天 都为 1 ，除此之外才+1
				data.signAmount++  //累计时间+1 
				data.signPoints = data.signPoints + this.rule[data.signCount - 1]  //积分由原来的加上今天签到获取的
				data.signTime = getDate()  //获取当前日期
				data.point = this.rule[data.signCount - 1]  //今天签到获取的积分
				//上传
				this.$http.post('/api/auth/member/sign/sign ', data).then(res => {
					this.active = true  //显示签到成功模板
				})
			},
			//签到完成
			close(){
				this.active = false  //关闭签到成功模板
				this.isSign = true  //状态变为已签到
			}
		}
	}
</script>
<style scoped lang="scss" scoped>
	.loadingpic {
		position: absolute;
		animation: load 3s linear 1s infinite;
		--webkit-animation: load 3s linear 1s infinite
	}
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #000;
		opacity: .5;
		z-index: 5
	}
	.sign .header{width:100%;height:310rpx;}
	.sign .header .headerCon{padding:0 0 0 30rpx;height:234rpx;background-color: $main-color;}
	.sign .header .headerCon .left{width:530rpx;font-size:32rpx;color:#fff;font-weight:bold;}
	.sign .header .headerCon .left .integral text{font-size:24rpx;margin-top:19rpx;background-color:#ff9000;text-align:center;border-radius:6rpx;font-weight:normal;padding:4rpx 15rpx;}
	.sign .header .headerCon .text{width:410rpx;}
	.sign .header .headerCon .left .pictrue{width:100rpx;height:100rpx;border-radius:50%;border:4rpx solid #ecddbc;} 
	.sign .header .headerCon .left .pictrue image{width:100%;height:100%;border-radius:50%;}
	.sign .header .headerCon .right{width:142rpx;height:66rpx;background-color:#fff;border-radius:50rpx 0 0 50rpx;font-size:24rpx;color:#ff9000;}
	.sign .header .headerCon .right .iconfont{font-size:33rpx;padding:0 10rpx 0 30rpx;margin-top:5rpx;}
	.sign .wrapper{background-color:#fff;margin:-80rpx 20rpx 0 20rpx;border-radius:15rpx;padding-bottom:80rpx;position:relative;margin-top: -100rpx;}
	.sign .wrapper .list{padding:0 30rpx;height:240rpx;}
	.sign .wrapper .list .item{font-size:22rpx;color:#8a8886;text-align:center;}
	.sign .wrapper .list .item .rewardTxt{width:74rpx;height:32rpx;background-color:#f4b409;border-radius:16rpx;font-size:20rpx;color:#a57d3f;line-height:32rpx;}
	.sign .wrapper .list .item .num{font-size:30rpx;color:#999;}
	.sign .wrapper .list .item .num.on{color:#ff9000;}
	.sign .wrapper .list .item .venus{background-image:url('');background-repeat:no-repeat;background-size:100% 100%;width:56rpx;height:56rpx;margin:10rpx 0;}
	.sign .wrapper .list .item .venus.venusSelect{background-image:url('');}
	.sign .wrapper .list .item .venus.reward{background-image:url('');width:75rpx;height:56rpx;}
	.sign .wrapper .but{width:400rpx;height:76rpx;font-size:30rpx;line-height:76rpx;color:#fff;border-radius:50rpx;text-align:center;margin:0 auto;}
	.sign .wrapper .but.on{background-color: #999 !important;}
	.sign .wrapper .lock{background-image:url('');background-repeat:no-repeat;background-size:100% 100%;width:558rpx;height:68rpx;position:absolute;left:50%;transform: translateX(-50%);bottom:-42rpx;z-index:9;}
	.sign .wrapper2{margin-top:15rpx;padding:73rpx 0 0 0;padding-bottom: 60rpx;}
	.sign .wrapper2 .tip{font-size:30rpx;color:#666;text-align:center;}
	.sign .wrapper2 .list2{margin:45rpx 0 49rpx 0;}
	.sign .wrapper2 .list2 .item{width:80rpx;height:116rpx;background-repeat:no-repeat;background-size:100% 100%;color:#fff;font-size:72rpx;text-align:center;line-height:116rpx;margin-right:19rpx;background-image:url('');}
	.sign .wrapper2 .list2 .data{font-size:30rpx;color:#232323;align-self: flex-end;}
	.sign .wrapper2 .tip2{font-size:30rpx;color:#999999;padding:0 55rpx;text-align:center;line-height:1.5;}
	.sign .signTip{width:644rpx;height:645rpx;position:fixed;top:50%;left:50%;margin-left:-322rpx;margin-top:-322.5rpx;z-index:99;text-align:center;transition:all 0.3s ease-in-out 0s;opacity:0;transform: scale(0);}
	.sign .signTip .signTipLight{background-image:url('');background-repeat:no-repeat;background-size:100% 100%;width:100%;height:100%;}
	.sign .signTip.on{opacity:1;transform: scale(1);}
	.sign .signTip .signTipCon{background-image:url('');background-repeat:no-repeat;background-size:100% 100%;width:420rpx;height:420rpx;position:relative;}
	.sign .signTip .signTipCon .state{font-size:34rpx;color:#fff;margin-top:150rpx;}
	.sign .signTip .signTipCon .integral{font-size:30rpx;color:rgba(255,255,255,0.6);margin-top:9rpx;}
	.sign .signTip .signTipCon .signTipBnt{font-size:30rpx;color:#eb4331;width:260rpx;height:76rpx;background-color:#f8d168;border-radius:38rpx;line-height:76rpx;margin:48rpx auto 0 auto;}
</style>